<!--
 * @Author: gyp
 * @Date: 2020-05-11 09:13:28
 * @LastEditors: gyp
 * @LastEditTime: 2020-09-08 11:17:36
 * @Description: 大队值班领导列表弹出框
 * @FilePath: \sy_kjxc_web\src\views\screen\components\userTable.vue
 -->
<template>
  <div class="userTable">
    <el-table :data="tableDatas && tableDatas.rows" border class="blueTable" style="width:100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="userName" label="姓名" min-width="50" />
      <el-table-column prop="telephone" label="电话" min-width="60" />
      <el-table-column prop="thisMonthState" label="本月已打卡数" min-width="60" />
      <el-table-column prop="lastMonthState" label="上月已打卡数" min-width="60" />
      <el-table-column label="操作" min-width="110">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row.id, 'record', scope.row.userName)"
            type="text"
            size="small"
          >打卡记录</el-button>
          <el-button
            @click="handleClick(scope.row.id, 'task', scope.row.userName)"
            type="text"
            size="small"
          >巡逻任务</el-button>
          <el-button
            @click="handleClick(scope.row.id, 'track', scope.row.userName)"
            type="text"
            size="small"
          >地图轨迹</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :tabledatas="tableDatas" :isScreen="true" @comgetData="findUserVoByPlatformId" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
export default {
  name: 'user-table',
  props: ['platformId'],
  components: {
    Pagination
  },
  data () {
    return {
      tableDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      } // 表格数据
    };
  },
  created () {
    this.findUserVoByPlatformId();
  },
  methods: {
    findUserVoByPlatformId (pageNumber = 1) {
      let params = {
        platformId: this.platformId,
        pageNumber: pageNumber,
        pageSize: 10
      };
      this.$api.screen.findUserVoByPlatformId(params).then(res => {
        this.tableDatas = {
          ...res.data,
          pageNum: pageNumber,
          pageSize: 10
        };
      });
    },
    /**
     * 人员的操作
     * @param {String} id 人员id
     * @param {String} type 操作类型
     * @param {String} name 人员名称
     */
    handleClick (id, type, name) {
      this.$emit('onUserClick', id, type, name);
    }
  }
};
</script>

<style lang="less" scoped>
.userTable {
  margin-top: 5px;
}
</style>
